<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
</head>

<body>
    <div class="box">
        <div class="red">
            <div class="box2"></div>
        </div>
        <div class="green">
            <div class="box3"></div>
        </div>
        <div class="black">
            <div class="box4"></div>
        </div>
    </div>

    <table style="height: 20px;width: 50%;" bordercolor='green' border="1px" cellspacing="0" class="table">
        <tr>
            <th>新闻</th>
            <th>娱乐</th>
            <th>体育</th>
            <th>电影</th>
            <th>音乐</th>
            <th>旅游</th>
        </tr>
    </table>
</body>
<script>
    var box = document.querySelector(".box")
    var box2 = document.querySelector(".box2")
    var box3 = document.querySelector(".box3")
    var box4 = document.querySelector(".box4")
    var red = document.querySelector(".red")
    var green = document.querySelector(".green")
    var black = document.querySelector(".black")
    var table = document.querySelector(".table")
    var html = document.querySelector("html")
    red.onclick = function () {
        table.style.background = "red"
        html.style.background = "hotpink"
        box2.style.display = "block"
        box3.style.display = "none"
        box4.style.display = "none"
    }
    green.onclick = function () {
        table.style.background = "green"
        html.style.background = "yellowgreen"
        box3.style.display = "block"
        box2.style.display = "none"
        box4.style.display = "none"
    }
    black.onclick = function () {
        table.style.background = "black"
        html.style.background = "#ddd"
        box4.style.display = "block"
        box2.style.display = "none"
        box3.style.display = "none"
    }



</script>

</html>
<style>
    .red {
        width: 20px;
        height: 20px;
        background-color: red;
    }

    .green {
        width: 20px;
        height: 20px;
        background-color: green;
    }

    .black {
        width: 20px;
        height: 20px;
        background-color: black;
    }

    .box {
        width: 15%;
        display: flex;
        justify-content: space-around;
        margin: 0 auto;
    }

    table {
        margin: 20px auto;
    }

    th {
        color: green;
    }

    .box2 {
        width: 10px;
        height: 10px;
        background-color: white;
        margin: 5px auto;
        display: none;
    }

    .box3 {
        width: 10px;
        height: 10px;
        background-color: white;
        margin: 5px auto;
        display: none;
    }

    .box4 {
        width: 10px;
        height: 10px;
        background-color: white;
        margin: 5px auto;
        display: none;
    }
</style>